<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-11-14 17:49:09
 * @FilePath: \onemodeSWJ\src\views\paramPlanManage\roughnessDataManage\mainStreamSection.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <!-- 断面糙率 -->
  <div v-if="props.selectRiverData.type === 'Z'">
    <el-row type="flex">
      <el-col
        v-for="item in roughnessData"
        :key="item.posstr"
        :span="4"
        style="padding: 5px"
      >
        <el-card
          class="roughness-data-card"
          :body-style="{ padding: 0, height: '83%' }"
          shadow="hover"
        >
          <template #header>
            <div class="card-header" style="text-align: center">
              <span>{{ item.posstr }}</span>

              <el-button
                v-if="props.isEditComponent"
                class="section-del-btn"
                type="danger"
                size="small"
                circle
                @click.prevent="deleteRoughnessData(0, item.posstr, 'section')"
              >
                <CloseOutlined />
              </el-button>
            </div>
          </template>
          <el-table
            :data="item.str"
            border
            stripe
            :max-height="235"
            @cell-dblclick="
              (row, column, cell, event) =>
                onDblclick(item.posstr, event, column)
            "
            @cell-mouse-leave="
              (row, column, cell, event) => onMouseleave(item.posstr, column)
            "
          >
            <el-table-column label="高程" align="center">
              <template #default="scope">
                <div>
                  <el-input
                    v-if="roughnessEditableData[item.posstr][scope.$index]"
                    v-model="
                      roughnessEditableData[item.posstr][scope.$index][1]
                    "
                    style="margin: -5px 0; text-align: center"
                    type="number"
                  />
                  <div :row-index="scope.$index" v-else>
                    {{ scope.row[1] }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="糙率" align="center">
              <template #default="scope">
                <div>
                  <el-input
                    v-if="roughnessEditableData[item.posstr][scope.$index]"
                    v-model="
                      roughnessEditableData[item.posstr][scope.$index][0]
                    "
                    style="margin: -5px 0; text-align: center"
                    type="number"
                  />
                  <div :row-index="scope.$index" v-else>
                    {{ scope.row[0] }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="props.isEditComponent"
              label="操作"
              align="center"
              width="60"
            >
              <template #default="scope">
                <el-button
                  style="padding: 0"
                  type="danger"
                  size="small"
                  text
                  @click.prevent="
                    deleteRoughnessData(scope.$index, item.posstr, 'table')
                  "
                >
                  <MinusOutlined />
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            v-if="props.isEditComponent"
            style="width: 100%; position: absolute; bottom: 0px"
            text
            @click="addRoughnessData(item.posstr)"
          >
            <PlusOutlined />
          </el-button>
        </el-card>
      </el-col>
      <el-col
        :span="4"
        style="
          padding: 5px;
          position: relative;
          height: 330px;
          box-sizing: border-box;
        "
      >
        <PlusCircleOutlined
          v-if="props.isEditComponent"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 80px;
            cursor: pointer;
          "
          @click="roughnessDataAdd = true"
        />
      </el-col>
    </el-row>

    <el-dialog
      title="糙率新增"
      v-model="roughnessDataAdd"
      width="20%"
      @close="() => (roughnessDataAddForm = { type: 'wq' })"
    >
      <el-form :model="roughnessDataAddForm">
        <el-form-item label="断面名称">
          <el-input v-model="roughnessDataAddForm.posstr" />
        </el-form-item>
        <el-form-item label="站点名称">
          <el-input v-model="roughnessDataAddForm.name" />
        </el-form-item>
        <el-form-item label="分级类型">
          <el-select v-model="roughnessDataAddForm.type" style="width: 100%">
            <el-option label="流量分级" value="wq" />
            <el-option label="水位分级" value="wz" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roughnessDataAdd = false">取消</el-button>
          <el-button type="primary" @click="addSection"> 新增 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 单条数据糙率 -->
  <div v-else-if="props.selectRiverData.type === 'T'">
    <el-form-item label="河道糙率">
      <el-input
        style="width: 200px"
        v-model="roughnessInputData"
        :readonly="!props.isEditComponent"
        @blur="inputUpdateSteamData"
      />
    </el-form-item>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import {
  MinusOutlined,
  PlusOutlined,
  CloseOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons-vue";
import { ElMessage } from "element-plus";

import { sectionNameVerify } from "@/request/api";

export default defineComponent({
  components: {
    MinusOutlined,
    PlusOutlined,
    CloseOutlined,
    PlusCircleOutlined,
  },
  props: {
    // 组件内数据是否可修改
    isEditComponent: {
      type: Boolean,
      default: () => false,
    },
    // 所选河道数据
    selectRiverData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const state = reactive({
      // 河道糙率查询条件
      searchInfo: {
        reservoir: "三峡库区",
        selectPlan: "默认方案",
        createComment: "",
      },
      // 河道糙率方案列表数据
      roughnessDataList: [],
      // 河道糙率数据
      roughnessData: [],
      // 河道糙率表格编辑参数
      roughnessEditableData: {},
      // 河道糙率新增数据弹窗
      roughnessDataAdd: false,
      // 新增数据表单
      roughnessDataAddForm: {
        posstr: "",
        type: "wq",
      },

      // 单条河道糙率
      roughnessInputData: "",
    });

    // 监听树状图所选河道变化
    watch(
      () => props.selectRiverData,
      (value) => {
        getMatData();
      },
      { deep: true }
    );

    // 所有河道糙率数据
    const steamData = inject("steamData");

    onMounted(() => {});

    /**
     * @description: 获取河道糙率数据
     * @param {*}
     * @return {*}
     */
    function getMatData() {
      const selectRiverData = props.selectRiverData;

      if (selectRiverData.type === "Z") {
        state.roughnessData = steamData[selectRiverData.key];

        if (state.roughnessData && state.roughnessData.length) {
          state.roughnessData.forEach((item) => {
            state.roughnessEditableData[item.posstr] = {};
          });
        } else {
          state["roughnessData"] = [];
        }
      } else {
        state.roughnessInputData = steamData[selectRiverData.key];
      }
    }

    /**
     * @description: 河道糙率表格数据/断面数据删除
     * @param index 编辑行在原数组中的index
     * @param posstr 断面名称
     * @return {*}
     */
    function deleteRoughnessData(index, posstr, type) {
      if (type === "table") {
        state.roughnessData
          .find((item) => item.posstr === posstr)
          .str.splice(index, 1);
      } else {
        let posstrIndex = state.roughnessData.findIndex(
          (item) => item.posstr === posstr
        );

        state.roughnessData.splice(posstrIndex, 1);
      }
    }

    /**
     * @description: 河道糙率表格新增
     * @param posstr 断面名称
     * @return {*}
     */
    function addRoughnessData(posstr) {
      state.roughnessData
        .find((item) => item.posstr === posstr)
        .str.push([0, 0]);
    }

    /**
     * @description: 河道糙率断面新增
     * @return {*}
     */
    function addSection() {
      sectionNameVerify({ xscd: state.roughnessDataAddForm.posstr }).then(
        (res: any) => {
          if (res.code === "1") {
            state.roughnessData.push({
              ...state.roughnessDataAddForm,
              str: [],
            });

            state.roughnessEditableData[state.roughnessDataAddForm.posstr] = {};

            state.roughnessDataAdd = false;
          } else {
            ElMessage.error("断面名称字母需要大写或者所输入断面不存在");
          }
        }
      );
    }

    /**
     * @description: 双击单元格后将当前行数据储存到准备编辑的数据中
     * @param posstr 所选的断面
     * @param event 双击的单元格dom元素
     * @param column 双击的单元格在表格中的属性
     * @return {*}
     */
    function onDblclick(posstr, event, column) {
      if (column.label != "操作") {
        const rowIndex = event.target.getAttribute("row-index");

        state.roughnessEditableData[posstr][rowIndex] =
          state.roughnessData.filter((item) => item.posstr == posstr)[0].str[
            rowIndex
          ];
      }
    }

    /**
     * @description: 移开鼠标后将储存的编辑数据赋值回去
     * @param posstr 当前断面
     * @param column 当前单元格在表格中的属性
     * @return {*}
     */
    function onMouseleave(posstr, column) {
      if (column.label != "操作") {
        // 循环站点下的每一个双击后新增的编辑数据
        for (const sectionKeyIndex in state.roughnessEditableData[posstr]) {
          // 将编辑后的数据重新赋值回断面糙率数据中
          state.roughnessData.filter((item) => item.posstr == posstr)[0].str[
            sectionKeyIndex
          ] = state.roughnessEditableData[posstr][sectionKeyIndex];
        }

        let steamDataList = [];

        steamDataList = state.roughnessData.map((item, i) => {
          return {
            mat: String(i + 1),
            name: item.name,
            type: item.type,
            num: String(item.str.length),
            str: item.str,
            posstr: item.posstr,
          };
        });

        const selectRiverData = props.selectRiverData;

        steamData[selectRiverData.key] = steamDataList;

        // 清空编辑的数据
        state.roughnessEditableData[posstr] = {};
      }
    }

    function inputUpdateSteamData() {
      const selectRiverData = props.selectRiverData;

      steamData[selectRiverData.key] = state.roughnessInputData;
    }

    return {
      ...toRefs(state),

      props,

      getMatData,
      deleteRoughnessData,
      addRoughnessData,
      addSection,

      onDblclick,
      onMouseleave,

      inputUpdateSteamData,
    };
  },
});
</script>

<style scoped lang="less">
.sedFormInput {
  margin-bottom: 20px;
  .form-box {
    display: flex;
  }
  .el-input {
    width: 100px;
    margin: 0 4px 8px 0;
  }
}

.section-del-btn {
  display: none;
}
.el-card.is-hover-shadow:hover:hover .section-del-btn {
  display: block;

  position: absolute;
  right: 10px;
  top: 15px;
}
</style>
